<template>
    <div class="report">
        <el-scrollbar style="height: 773px;">
            <div class="base" style="margin-top: 10px">
                <div class="empty marginR"></div>
                <div>高女士推荐报告</div>
            </div>
            <div class="reportContent">
                <div class="font textC">候选人评估报告</div>
                <div class="bergin">尊敬的企业用户您好：</div>
                <div class="language">
                    <div>为了让您有一个更加全面和细致的了解，节约您宝贵的面试时间， 提高您对候选人综合判断的准确性，
                        将候选人更加真实和内在的一面呈现在您的面前 ，我们特向您提供本报告。
                    </div>
                    <div>本报告共分为七大部分，分别为：</div>
                    <div>第一部分：候选人基本信息；</div>
                    <div>第二部分：候选人的知识与技能结构；</div>
                    <div>第三部分：候选人过往经历与主要业绩描述；</div>
                    <div>第四部分：候选人的个性特征与管理风格倾向；</div>
                    <div>第五部分：候选人的优劣势分析；</div>
                    <div>第六部分：核心胜任力构成；</div>
                    <div>第七部分：推荐建议。</div>
                </div>
                <!--第一部分-->
                <div class="basic basicFont marginB">
                    <div class="titleFont">第一部分：基本信息</div>
                    <div class="base marginT">
                        <div>姓名：</div>
                        <div class="fontT fontLeft">{{report.base.name}}</div>
                    </div>
                    <div class="base marginT1">
                        <div>性别：</div>
                        <div class="fontT fontLeft">{{report.base.sex}}</div>
                    </div>
                    <div class="base marginT1">
                        <div>出生年月：</div>
                        <div class="fontT fontLeft1">{{report.base.birth}}</div>
                    </div>
                    <div class="base marginT1">
                        <div>所在城市：</div>
                        <div class="fontT fontLeft1">{{report.base.city}}</div>
                    </div>
                    <div class="base marginT1">
                        <div>期望职位：</div>
                        <div class="fontT fontLeft1">{{report.base.expPost}}</div>
                    </div>
                    <div class="base marginT1">
                        <div>期望年薪：</div>
                        <div class="fontT fontLeft1">{{report.base.expAnnualSalary}}</div>
                    </div>
                </div>
                <!--第二部分-->
                <div class="basic basicFont marginB">
                    <div class="titleFont">第二部分：知识与技能</div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">教育经历:</div>
                        <div class="marginR1 fontSize">大学名称</div>
                        <div class="marginR1 time">在读时间</div>
                        <div>专业名称</div>
                        <div class="empty1"></div>
                        <div>学历</div>
                    </div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">人才亮点:</div>
                        <div class="marginR1">一级建造师</div>
                        <div class="marginR1">机电工程</div>
                    </div>
                </div>
                <!--第三部分-->
                <div class="basic basicFont marginB">
                    <div class="titleFont">第三部分：过往经历与业绩描述</div>
                    <!--工作经历-->
                    <div class="base marginT1 ">
                        <div class="fontSize marginR">工作经历:</div>
                    </div>
                    <div class="work marginL1">
                        <div class="base ">
                            <div class="marginR1 fontSize">大学名称</div>
                            <div class="marginR1 time ">在读时间</div>
                        </div>
                        <div class="base marginT1">
                            <div class="fontT">职位名称</div>
                            <div class="empty1"></div>
                            <div class="fontT">职位类型</div>
                            <div class="empty1"></div>
                            <div class="fontT">企业类型</div>
                            <div class="empty1"></div>
                            <div class="fontT">所在城市</div>
                        </div>
                        <div class="WorkCont">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                            3、严格监督土建工程项目施工质量，参加土建工程检查验收，隐蔽验收及土建工
                            程材料、设备进场检查验收，对土建工程质量负完全责任。
                            4、严格监督控制土建工程项目施工成本，参加土建工程现场经济签证的审查确认，
                            确保土建工程项目成本控制目标的实现
                        </div>
                    </div>
                    <!--项目经验-->
                    <div class="base marginT1">
                        <div class="fontSize marginR">项目经验:</div>
                    </div>
                    <div class="work marginL1">
                        <div class="base ">
                            <div class="marginR1 fontSize">项目名称</div>
                            <div class="marginR1 time ">工作时间</div>
                        </div>
                        <div class="WorkCont">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                            3、严格监督土建工程项目施工质量，参加土建工程检查验收，隐蔽验收及土建工
                            程材料、设备进场检查验收，对土建工程质量负完全责任。
                            4、严格监督控制土建工程项目施工成本，参加土建工程现场经济签证的审查确认，
                            确保土建工程项目成本控制目标的实现
                        </div>
                    </div>
                </div>
                <!--第四部分-->
                <div class="basic basicFont marginB">
                    <div class="titleFont">第四部分：个性特征与管理风格倾向</div>
                    <div class="marginT marginB">该候选人主要符合以下四项个性与行为特征：</div>
                    <div class="base marginT1 ">
                        <div class="fontSize marginR">影响性:</div>
                        <div class="WorkCont MT marginL2">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">情感性:</div>
                        <div class="WorkCont MT marginL2">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">独立性:</div>
                        <div class="WorkCont MT marginL2">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">自律性:</div>
                        <div class="WorkCont MT marginL2">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                </div>
                <!--第五部分-->
                <div class="basic basicFont marginB">
                    <div class="titleFont">第五部分：优劣势分析</div>
                    <div class="base marginT1">
                        <div class="fontSize marginR ">优势:</div>
                        <div class="WorkCont MT mL">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">劣势:</div>
                        <div class="WorkCont MT mL">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                </div>
                <!--第六部分-->
                <div class="basic basicFont marginB">
                    <div class="titleFont">第六部分：核心胜任力构成</div>
                    <div class="marginT marginB">该候选人核心胜任力主要有以下四大要素：</div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">要素名称:</div>
                        <div class="WorkCont MT marginL2">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                    <div class="base marginT1">
                        <div class="fontSize marginR">要素名称:</div>
                        <div class="WorkCont MT marginL2">
                            1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                            2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                            负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                        </div>
                    </div>
                </div>
                <!--第七部分-->
                <div class="basic basicFont marginB MB">
                    <div class="titleFont">第七部分：推荐建议</div>
                    <div class="marginT marginB">对于该候选人我们的建议是：</div>
                    <div class="WorkCont MT marginL3">
                        1、负责开工前地质勘察、三通一平、图纸会审，负责基础、主体、竣工验收、保修组织管理工作。
                        2、协同施工单位根据合同及公司总体布置情况编制施工总进度计划，审查工程施工组织设计及施工方案，
                        负责控制土建工程项目的现场施工进度，确保土建工程项目进度计划的完成。
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <!--底部-->
        <div class="bottom">
            <div class="font">
                <span class="fontSize1">当前沟通职位：</span>
                <span class="fontColor">职位</span>
            </div>
            <div class="base icon_position">
                <div class="base bottomR">
                    <div class="icon_green"></div>
                    <div class="fontG">邀请入职</div>
                </div>
                <div class="base bottomR">
                    <div class="icon_gray"></div>
                    <div class="">不合适</div>
                </div>
                <div class="base">
                    <div class="icon_xiaoxi"></div>
                    <div class="">沟通</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'report',
    data() {
      return {
        report: {
          base: { name: '高女士', sex: '女', birth: '1992年', city: '武汉', expPost: '造价工程师', expAnnualSalary: '10W-20W/年' },
          knowskill: {
            college: '华中科技大学',
            schoolTime: '2018.02-2019.03',
            major: '建筑工程',
            edu: '本科',
            certType: '高级工程师',
            certName: '注册给排水工程师'
          }
        }
      }
    }
  }
</script>

<style scoped>
    .report {
        height: 850px;
        width: 798px;
    }

    .base {
        display: flex;
        flex-direction: row;
    }

    .empty {
        width: 2px;
        height: 15px;
        background-color: #F09338;
        margin-left: 28px;
        margin-top: 4px;
    }

    .empty1 {
        width: 2px;
        height: 15px;
        background-color: #666;
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 4px;
    }

    .marginR {
        margin-right: 10px;
    }

    .reportContent {
        width: 100%;
        /*height: 798px;*/
        border-top: 1px solid #DCDCDC;
        margin-top: 17px;
        color: #333;
    }

    .font {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-top: 31px;
        margin-bottom: 29px;
    }

    .bergin {
        text-align: left;
        margin-left: 48px;
        color: #333;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 19px;
    }

    .language {
        width: 691px;
        height: 230px;
        color: #666;
        line-height: 25px;
        text-align: left;
        font-size: 14px;
        text-indent: 2em;
        margin-left: 48px;
        margin-bottom: 29px;
    }

    .basic {
        text-align: left;
    }

    .titleFont {
        color: #333;
        font-size: 18px;
        font-weight: bold;
    }

    .basicFont {
        margin-left: 48px;
    }

    .fontT {
        color: #666;
        font-size: 14px;
    }

    .fontLeft {
        margin-left: 90px;
    }

    .fontLeft1 {
        margin-left: 59px;
    }

    .marginT {
        margin-top: 29px;
    }

    .marginT1 {
        margin-top: 12px;
    }

    .marginB {
        margin-bottom: 17px;
    }

    .marginL {
        margin-left: 17%;
    }

    .fontSize {
        font-size: 16px;
        font-weight: bold;
    }

    .marginR {
        margin-right: 51px;
    }

    .marginR1 {
        margin-right: 30px;
    }

    /*-----------------------------------*/
    .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 798px;
        height: 78px;
        font-size: 14px;
        color: #666;
        background-color: #FBFBFF;
    }

    .bottomR {
        margin-right: 20px;
    }

    .font {
        width: 379px;
        height: 20px;
        margin-top: 29px;
        margin-left: 51px;
        text-align: left;
    }

    .icon_green {
        width: 16px;
        height: 14px;
        background: url('../../../assets/img/communication/invitation_green.jpg') no-repeat;
        margin-top: 3px;
        margin-right: 8px;
        z-index: 9;
    }

    .icon_gray, .icon_xiaoxi {
        width: 16px;
        height: 16px;
        background: url('../../../assets/img/communication/fit_black.jpg') no-repeat;
        margin-top: 3px;
        margin-right: 8px;
        z-index: 9;
    }

    .icon_xiaoxi {
        background: url('../../../assets/img/communication/xiaoxi_black.png') no-repeat;
    }

    .fontG {
        color: #009944;
    }

    .icon_position {
        position: absolute;
        right: 50px;
        bottom: 29px;
    }

    .fontColor {
        color: #4AB0CF;
    }

    .fontSize1 {
        font-size: 16px;
    }

    .textC {
        margin-left: 40%;
    }

    .time {
        font-size: 14px;
        color: #999;
    }

    .WorkCont {
        width: 600px;
        /*height: 161px;*/
        margin-top: 15px;
        /*border: 1px solid #999;*/
        font-size: 14px;
        margin-bottom: 10px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-align: left;
    }

    .MT {
        margin-top: 0px;
    }

    .marginL1 {
        margin-left: 11%;
    }

    .mL {
        margin-left: -10px;
    }

    .work {
        margin-top: 10px;
    }

    .marginL2 {
        margin-left: -30px;
    }

    .marginL3 {
        width: 691px;
        margin-left: 0px;
        text-indent: 2em;
    }
</style>
